let kun = document.querySelectorAll('.box1')
let left = document.querySelector('.left-1')
let right = document.querySelector('.right-1')
let personal = document.querySelector('.userss')
//轮播图

var swiper = new Swiper(".mySwiper", {
    cssMode: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
    },
    mousewheel: true,
    keyboard: true,
});
let div = document.querySelectorAll('.wrap ul li>div')
//    console.log(div)
// 给li鼠标移入移出事件
$('.daohan .kou').hover(function (e) {
    // 鼠标移入。下拉显示
    let puts = e.target.getAttribute('index')
    // console.log(puts);
    $(this).parents().find('.wrap').stop().slideDown();
    // if (e.target.getAttribute('index') == 1) {
    switch (puts) {
        case '1':
            getLists();
            async function getLists() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            break; //停止执行，跳出switch
        case '2':
            getListsd();
            async function getListsd() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("VIP会员");
            break; //停止执行，跳出switch
        case '3':
            getListsdl();
            async function getListsdl() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '4':
            getListsdk();
            async function getListsdk() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '5':
            getListsdb();
            async function getListsdb() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '6':
            getListsdm();
            async function getListsdm() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '7':
            getListsdp();
            async function getListsdp() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch

        default: //上述条件都不满足时，默认执行的代码
            console.log("游客");
    }
    // }

}, function () {
    // console.log("无敌1")
    // $(this).parents().find('.wrap').stop().slideUp();
    $(this).parents().find('.wrap').stop().slideUp();
})
$('.wrap').hover(function () {
    $(this).parents().find('.wrap').stop().slideDown();
    // if (e.target.getAttribute('index') == 1) {
}, function () {
    $(this).parents().find('.wrap').stop().slideUp();

})
personal.onclick = function () {
    delCookie('username')
    location.href = "./login.html"
}
console.log(getCookie('username'))
if (getCookie('username')) {
    document.querySelector('.user').style.display = "block";
    document.querySelector('.user').innerHTML = `欢迎${getCookie('username')}来到vivo商城`
}
var n = 0;
right.onclick = function () {
    n++;
    // console.log(n);
    if (n == 7) {
        n = 0
    }
    for (var i = 0; i < kun.length; i++) {
        kun[i].style.display = 'none';
        kun[i].className = 'box1';
        // console.log(kun[i])
    }
    kun[n].style.display = 'block';
    kun[n].className = 'box1 active';
    // console.log(kun[n])
    getList();
    // console.log(123)
}
left.onclick = function () {
    n--;
    if (n < 0) {
        n = 6
    }
    for (var i = 0; i < kun.length; i++) {
        kun[i].style.display = 'none'
        // console.log(kun[i])
        kun[i].className = 'box1';
    }
    kun[n].style.display = 'block'
    kun[n].className = 'box1 active';
    getList();
}
getList()
async function getList() {
    let res = await pAjax({
        url: './severs/list.php',
        data: {
            pid: 6
        },
        dataType: 'json',
    })

    let data = res.data;

    let str = '';
    data.forEach(element => {
        str += ` <div class="con-1">
        <div class="con-2">
            <img src="${element.imgpath.split('==========')[0]}" alt="">
        </div>
        <div class="con-3">
            <h3>${element.introduce.split('==')[0]}</h3>
            <p>${element.introduce.split('==')[1]}</p>
        </div>
        <div class="con-4">
            ￥${element.price}
        </div>
    </div>`
    });
    document.querySelector('.phone .con').innerHTML = str;
    /**********************/
    let res1 = await pAjax({
        url: './severs/list.php',
        data: {
            pid: 7
        },
        dataType: 'json',
    })

    let data1 = res1.data;

    let str1 = '';
    data1.forEach(element => {
        str1 += ` <div class="con-1">
        <div class="con-2">
            <img src="${element.imgpath.split('==========')[0]}" alt="">
        </div>
        <div class="con-3">
            <h3>${element.introduce.split('==')[0]}</h3>
            <p>${element.introduce.split('==')[1]}</p>
        </div>
        <div class="con-4">
            ￥${element.price}
        </div>
    </div>`
    });
    document.querySelector('.phone1 .con').innerHTML = str1;
    /********************** */
    let res2 = await pAjax({
        url: './severs/list.php',
        data: {
            pid: 9
        },
        dataType: 'json',
    })

    let data2 = res2.data;

    let str2 = '';
    data2.forEach(element => {
        str2 += `<div class="con-6">
        <div class="con-7">
            <img src="${element.imgpath.split('==========')[0]}" alt="">
        </div>
        <div class="con-8">
            <h3>${element.introduce.split('==')[0]}</h3>
            <p>${element.introduce.split('==')[1]}</p>
        </div>
        <div class="con-9">
        ￥${element.price}
        </div>
    </div>`
    });
    document.querySelector('.phone2 .con').innerHTML = str2;
    /**************************** */
    let res3 = await pAjax({
        url: './severs/list.php',
        data: {
            pid: 10
        },
        dataType: 'json',
    })

    let data3 = res3.data;

    let str3 = '';
    data3.forEach(element => {
        str3 += `<div class="con-6">
        <div class="con-7">
            <img src="${element.imgpath.split('==========')[0]}" alt="">
        </div>
        <div class="con-8">
            <h3>${element.introduce.split('==')[0]}</h3>
            <p>${element.introduce.split('==')[1]}</p>
        </div>
        <div class="con-9">
        ￥${element.price}
        </div>
    </div>`
    });
    document.querySelector('.kun-1 .active').innerHTML = str3;
}
//给轮播上的列表加数据
lists();

function lists() {
    $('.girl').hover(function () {
        $('.li-one').css('display', 'block')
        someli();
        async function someli() {
            let res4 = await pAjax({
                url: './severs/list.php',
                data: {
                    pid: '11 or pid = 12'
                },
                dataType: 'json',
            })

            let data4 = res4.data;

            let str4 = '';
            data4.forEach(element => {
                str4 += ` <div class="lop">
        <div class="rou">${element.name}</div>
        <div class="pyt">
            <img src="${element.imgpath.split('==========')[0]}" alt="" data-id="${element.id}">
        </div>
    </div>`
            });
            document.querySelector('.gop').innerHTML = str4;
            let res5 = await pAjax({
                url: './severs/list.php',
                data: {
                    pid: '11 or pid = 12 or pid =10'
                },
                dataType: 'json',
            })
            let data5 = res5.data;
            let str5 = "";
            data5.forEach(element => {
                str5 += `  <div class="sod">
                <div>
                    <img src="${element.imgpath.split('==========')[0]}" alt="" data-id="${element.id}">
                </div>
                <div class="foue">
                    ${element.name}
                </div>
            </div>`
            });
            document.querySelector('.dog').innerHTML = str5;
            fangFa(); //渲染完在调用

        }
    }, function () {
        $('.li-one').css('display', 'none')
    })
    $('.li-one').hover(function () {
        $('.li-one').css('display', 'block')
    }, function () {
        $('.li-one').css('display', 'none')
    })
}
//事件委托
function fangFa() {
    $('.gop').on('click', function (e) {
        // 判断点击的是否是a标签
        if (e.target.nodeName === 'IMG') {
            // 将商品的id存储在sessionStorage
            // console.log(e.target.dataset.id);
            sessionStorage.setItem('goodsId', e.target.dataset.id);
            // 跳转至详情页面
            location.href = './detail.html';
        }
    })
    $('.dog').on('click', function (e) {
        // 判断点击的是否是a标签
        if (e.target.nodeName === 'IMG') {
            // 将商品的id存储在sessionStorage
            // console.log(e.target.dataset.id);
            sessionStorage.setItem('goodsId', e.target.dataset.id);
            // 跳转至详情页面
            location.href = './detail.html';
        }
    })
}